$(function() {
	//修改页面title
	var s_cn = $('._service_change').text();
	var a_cn = $('._service_api_option').text();
	$(document).attr("title", "监控－" + a_cn + "－" + s_cn + "－云途数据市场"); //修改title值
	//初始化
	var chart;
	//加载highcharts内容
	var x_axis = JSON.parse($('#degree_chart').attr('data-x'));
	var ret_data = JSON.parse($('#degree_chart').attr('data-series-ret'));
	hasHighChart(x_axis, '返回条数', ret_data, '数量', '条数');
	//返回条数-折线图
	$('._cnt_ret').click(function() {
		$('._cnt_tab').removeClass('hr');
		$(this).addClass('hr');

		var x_axis = JSON.parse($('#degree_chart').attr('data-x'));
		var ret_data = JSON.parse($('#degree_chart').attr('data-series-ret'));
		hasHighChart(x_axis, '返回条数', ret_data, '数量', '条数');
	});
	//总调用次数-折线图
	$('._cnt_call').click(function() {
		$('._cnt_tab').removeClass('hr');
		$(this).addClass('hr');
		var x_axis = JSON.parse($('#degree_chart').attr('data-x'));
		var call_data = JSON.parse($('#degree_chart').attr('data-series-call'));
		hasHighChart(x_axis, '总调用次数', call_data, '数量', '次数');
	});
	//可用率-折线图
	$('._cnt_cnt').click(function() {
		$('._cnt_tab').removeClass('hr');
		$(this).addClass('hr');
		var x_axis = JSON.parse($('#degree_chart').attr('data-x'));
		var cnt_data = JSON.parse($('#degree_chart').attr('data-series-cnt'));
		hasHighChart(x_axis, '可用率', cnt_data, '百分比', '%');
	});
	//使用人数-折线图
	$('._cnt_use').click(function() {
		$('._cnt_tab').removeClass('hr');
		$(this).addClass('hr');
		var x_axis = JSON.parse($('#degree_chart').attr('data-x'));
		//var cnt_data = JSON.parse( $('#degree_chart').attr('data-series-cnt') );
		var cnt_data = JSON.parse($('#degree_chart').attr('data-series-count'));
		hasHighChart(x_axis, '使用人数', cnt_data, '数量', '人');
	});
	//点击“查询”
	$('._monitor_search').click(function() {
		var service_id = $('._service_change').val();
		var api_id = $('._service_api_option').val();
		var cycle_type = $('._cycle_type').val();
		location.href = "/apiworks/monitorDetail.html?service_name=" + service_id + "&api_name=" + api_id + "&cycle_type=" + cycle_type;
	});
	//选择服务
	$(document).on('change','._service_change',function() {
		//服务选项
		var that = $(this);
		var text = that.find("option:selected").text();
		
		var value = that.val();
		var all_api_options = $("._service_api_option").attr('data-options');
		all_api_options = JSON.parse(all_api_options);
		//渲染数据
		$("select._service_api_option").empty(); //清空原api option选项
		if(typeof(all_api_options[value]) != undefined) {
			var html = template('script_service_api', {
				list: all_api_options[value]
			});
			$("._service_api_option").append(html);
		}
	});
	//选择api
	$("._service_api_option").change(function() {
		var that = $(this);
		var text = that.find("option:selected").text();
		var value = that.val();
	});
});

//图表函数
function hasHighChart(x_axis, name, series, y_title, tooltip) {
	if(!y_title) y_title = "数量";
	if(!tooltip) tooltip = "次数";
	//图表
	chart = new Highcharts.Chart({
		chart: {
			renderTo: 'degree_chart', //设置显示图表的容器  
			type: 'spline', //设置图表样式，可以为
		},
		legend: {
			enabled: false,
			layout: 'vertical',
			align: 'right',
			verticalAlign: 'middle',
			borderWidth: 0,
			x: 0, //距离x轴的距离
			y: 20 //距离Y轴的距离
		},
		title: {
			text: '',
			x: -20 //center
		},
		subtitle: {
			text: '',
			x: -20
		},
		yAxis: {
			title: {
				text: y_title
			},
			plotLines: [{
				value: 0,
				width: 1,
				color: '#808080'
			}]
		},
		tooltip: {
			valueSuffix: tooltip
		},
		xAxis: {
			categories: x_axis //数组对象  
		},
		series: [{
			name: name,
			data: series //数组对象
		}]
	});

}